<!-- 约看 -->
<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-appointment-container`]">
      <view class="appointment-list">
        <template v-if="pageConfig.dataList.length">
          <view class="appointment-item" v-for="(item, index) in pageConfig.dataList" :key="index">
            <view class="date" @click="handleAppointment(item)">
              <span>{{ item.see_time_v2 }}</span> <span class="see_state" :style="{ background: returnBackground(item.see_state) }">{{ item.see_state }}</span>
            </view>
            <view class="detail">
              <view class="title" @click="handleDetail(item)">
                <text>{{ item.project_name }}</text>
                <uv-icon name="arrow-right"></uv-icon>
              </view>
              <view class="address">{{ item.district }}{{ item.business_district_name }} | {{ item.subway_info }}</view>
              <view class="room" @click="handleAppointment(item)">
                <view v-if="item.type !== 'project'" class="room-left">
                  <!-- has_video -->
                  <image :src="item.cover || item.room_type_cover" alt="" />
                </view>
                <view class="room-right">
                  <view v-if="item.type === 'room'" class="room-type-name">{{ item.room_main_info }}</view>
                  <view v-else class="room-type-name">{{ item.room_type_name }}</view>
                  <view v-if="item.type === 'room'" class="room-type-detail">{{ item.room_sub_info }}</view>
                  <view v-if="item.type === 'room'" class="room-type-detail">{{ item.room_type_name }}</view>
                  <view v-else class="room-type-detail">{{ item.room_type_detail }}</view>
                  <view class="price">
                    <text class="money">{{ item.min_price }}</text>
                    <text class="unit">元/间/月/起</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="btn-group" @click="handleAppointment(item)">
              <view class="btn" @click.stop="handleServicePhone(item)">电话咨询</view>
            </view>
          </view>
        </template>
        <template v-else>
          <cu-empty mode="list" text="暂无约看"> </cu-empty>
        </template>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import Helper from '@/common/helper'
import { mapActions, mapGetters } from 'vuex'
import { seeHouseList } from './api'

export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      pageConfig: {
        dataList: [],
        page: 1,
        pageLimit: 10,
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.pageConfig.page = 1
    this.getData()
  },
  // 加载更多
  onReachBottom() {
    if (this.pageConfig.dataList.length >= this.pageConfig.dateCount) return
    this.pageConfig.page++
    this.getData()
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      this.seeHouseList()
    },
    async seeHouseList() {
      const { page, pageLimit } = this.pageConfig
      const { data } = await seeHouseList({ page, pageLimit })
      uni.stopPullDownRefresh()
      const { dateCount, list } = data
      this.pageConfig.dateCount = dateCount
      if (page === 1) {
        this.pageConfig.dataList = list
      } else {
        this.pageConfig.dataList = [...this.pageConfig.dataList, ...list]
      }
    },
    handleDetail({ type, room_type_id, project_id }) {
      if (type === 'room') {
        this.$ROUTE.go('/pages/subpackage/housing-resources/room-detail/index', { roomTypeId: room_type_id, type: 'v2', projectId: project_id })
      } else if (type === 'room_type') {
        this.$ROUTE.go('/pages/subpackage/housing-resources/room-detail/index', { roomTypeId: room_type_id, type: '', projectId: project_id })
      } else {
        this.$ROUTE.go('/pages/subpackage/housing-resources/housing-detail/index', { projectId: project_id })
      }
    },
    handleAppointment({ id }) {
      this.$ROUTE.go('/pages/subpackage/appointment/detail', { id })
    },
    handleServicePhone({ service_phone }) {
      Helper.callPhone(service_phone)
    },
    returnBackground(value) {
      if (value == '成功预约') {
        return '#046f7e'
      } else if (value == '预约取消') {
        return '#999999'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('appointment-container')} {
  background: #f5f5f5;
  .appointment-list {
    display: flex;
    flex-direction: column;
    .appointment-item {
      &:first-child {
        margin-top: 16rpx;
      }
      margin: 0rpx 16rpx 24rpx;
      box-sizing: border-box;
      .date {
        box-sizing: border-box;
        padding: 16rpx 32rpx;
        font-weight: 600;
        font-size: 12px;
        color: #222222;
        background: white;
        border-radius: 16rpx;
        display: flex;
        justify-content: space-between;
        .see_state {
          font-weight: 600;
          font-size: 20rpx;
          color: #ffffff;
          padding: 4rpx 8rpx;
          border-radius: 8rpx;
        }
      }
      .detail {
        border-top: 1px dashed #f1f1f1;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        background: white;
        padding: 24rpx 32rpx;
        .title {
          display: flex;
          justify-content: space-between;
          font-weight: 600;
          font-size: 16px;
          color: #222222;
        }
        .address {
          font-weight: 400;
          font-size: 11px;
          color: #666666;
          margin: 16rpx 0;
        }
        .room {
          display: flex;
          .room-left {
            width: 240rpx;
            height: 180rpx;
            border-radius: 14rpx;
            overflow: hidden;
            margin-right: 16rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .room-right {
            .room-type-name {
              font-weight: 600;
              font-size: 14px;
              color: #222222;
              margin: 8rpx 0;
            }
            .room-type-detail {
              font-weight: 400;
              font-size: 11px;
              color: #666666;
            }
            .price {
              .money {
                margin-left: 4rpx;
                font-weight: 600;
                font-size: 32rpx;
                color: $uv-price-primary;
              }
              .unit {
                font-weight: 600;
                font-size: 20rpx;
                color: $uv-price-primary;
              }
            }
          }
        }
      }
      .btn-group {
        background: white;
        display: flex;
        .btn {
          font-size: 24rpx;
          color: #666666;
          padding: 8rpx 24rpx;
          margin-left: auto;
          border-radius: 26rpx;
          border: 2rpx solid #e6e6e6;
          margin-right: 32rpx;
          margin-bottom: 32rpx;
        }
      }
    }
  }
}
</style>
